<template>
    <el-dialog
        title="修改密码"
        :visible.sync="dialogVisible"
        custom-class="modelbox"
        width="30%"
        center>
        <p v-if="!showChangePasswd">为了账户安全请立即修改密码，否则存在安全风险。</p>
        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
            <el-form-item v-if="showChangePasswd" label="旧密码" prop="oldpass">
                <el-input type="password"  v-model="ruleForm2.oldpass" ></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="pass">
                <el-input type="password"  v-model="ruleForm2.pass" ></el-input>
            </el-form-item>
            <el-form-item label="新确认密码" prop="checkPass">
                <el-input type="password"  v-model="ruleForm2.checkPass"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editPassword">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { encrypt, decrypt} from '../../scripts/crypto.js'
export default {
    data() {
        var validateOldpass = (rule, value, callback) => {
            var password = this.currentuser && this.currentuser.password || ''
            console.log(password)
            if (value === '') {
                callback(new Error('请输入旧密码'));
            } else if (encrypt(value) !== password) {
                callback(new Error('输入的旧密码错误'));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else if(!/^(?=.*[0-9])(?=.*[a-zA-Z]).{8,}$/.test(value)){
                callback(new Error('密码至少8位，且要求必须字母和数字的组合'));
            }
            else {
                if (this.ruleForm2.checkPass !== '') {
                    this.$refs.ruleForm2.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm2.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            dialogVisible:false,
            currentuser: {},
            ruleForm2:{
                oldpass: "",
                pass:"",
                checkPass:""
            },
            rules2: {
                oldpass: [
                    { validator: validateOldpass, trigger: 'blur' }
                ],
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ]
            }
        }
    },
    props: ['showChangePasswd'],
    watch: {
        showChangePasswd(v) {
            if(v) {
                this.dialogVisible = v;
            }
        },
        dialogVisible(v) {
            if(!v) {
                this.$emit('close')
            }
        }
    },
    mounted() {
        let isFromLogin = this.$store.state.isFromLogin;
        console.log('isFromLogin', isFromLogin)
        this.$$http("GET_CURRENT_USER").then(data=>{
            // 如果密码还是123456 提示用户修改密码
            if(data && data.password ===  encrypt("123456") && isFromLogin){
                this.dialogVisible = true;
            }
            this.currentuser = data
            console.log(this.currentuser)
            if(isFromLogin) {
                this.$store.commit('SET_FROM_LOGIN', false);
            }
        })
    },
    methods: {
        editPassword(){
            if(!(this.ruleForm2.pass && this.ruleForm2.checkPass && this.ruleForm2.checkPass.length >= 6)){
                this.$message.error("请输入新的密码");
                return
            }
            if(this.ruleForm2.pass === this.ruleForm2.checkPass){
                var password = encrypt(this.ruleForm2.checkPass)
                var userid = this.currentuser && this.currentuser.userid
                this.$$http("EDIT_USER_INFO",userid,{userid:userid, password:password}).then(data=>{
                    if(password === data.password){
                        this.$message.success("密码修改成功");
                        this.$router.push(`/content/tzgg`)
                    }else{
                        this.$message.error("请重新设置密码"); 
                    }
                    this.dialogVisible = false;
                })
            }else{
                this.$message.error("两次设置的密码不相同");
            }
            
        },
    }
}
</script>


<style lang="scss">
.modelbox{
    .el-dialog__title{
        font-size: 24px;
    }
    .el-dialog__body{
        &>p{
            font-size: 20px;
            line-height: 28px;
            margin-bottom: 30px;
        }
    }
}
</style>